<template>
	<div class="cart">
		<header>
			
					<span>购物车</span>
					<span>编辑</span>
		</header>
	</div>
	<section>
		<ul>
			<li>
				<div class="check">
					<van-checkbox class="vantcheck" v-model="checked"></van-checkbox>
				</div>
				<h2>
					<img src="../../public/images/list-1.webp" alt="" />
				</h2>
				<div class="goods">
					<div class="goods-title">
						<span>【送运费险】早秋黑色上衣女新款百搭纯色V领交叉长袖针织衫</span>
					</div>
					<div class="goods-num">
						<div class="goods-price">￥199.00</div>
						<van-stepper v-model="value"></van-stepper>
					</div>
				</div>
			</li>
		</ul>
	</section>
	<footer>
		<div class="redio">
			<van-checkbox v-model="checked"></van-checkbox>
		</div>
		<div class="total">
			<div>
				全选（<span class="total-active">1</span>）
			</div>
		</div>
		<div class="order">
			<div class="order-price">
				<span class="total-active">￥199.00</span>
			</div>
			<div class="order-jiesuan"@click="goOrder">
				结算
			</div>
		</div>
	</footer>
    <div>
        <Tabbar></Tabbar>
    </div>
</template>

<script setup>
import Tabbar from '../components/common/Tabbar.vue'
	import {
		ref
	} from 'vue'
	import {useRouter} from 'vue-router'
	let router = useRouter()
	const checked = ref(true)
	const value = ref(1)
	const goOrder = ()=>{
		// if( !cartStore.selectList.length ){
		// 	return
		// }
		router.push({
			path:'/order',
			// query:{
			// 	detail:JSON.stringify(cartStore.selectList)
			// }
		})
	}
</script>

<style scoped>
	header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 1.173333rem;
		color: #fff;
		background-color: #ff5777;
	}

	header i {
		padding: 0 0.4rem;
		font-size: 0.586666rem;
	}

	header span {
		padding: 0 0.4rem;
		font-size: 0.426666rem;
	}

	section {
		background-color: #f5f5f5;
	}

	section ul {
		display: flex;
		flex-direction: column;
	}

	section ul li {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0.16rem 0.533333rem;
		margin: 0.213333rem 0;
		background-color: #fff;
	}

	section ul li .check {
		padding-right: 0.373333rem;
	}

	section ul li .goods {
		display: flex;
		height: 2.525rem;
		flex-direction: column;
		justify-content: space-between;
		padding-left: 0.4rem;
		font-size: 0.32rem;
	}

	section ul li .goods .goods-title {
		display: flex;
		font-size: 0.355rem;
		font-weight: 700;
	}

	section ul li .goods .goods-title i {
		font-size: 0.586666rem;
	}

	section ul li .goods .goods-price {
		padding: 0.08rem 0;
		color: #ff5777;
		font-weight: 700;
		font-size: 0.4375rem;
	}

	section ul li .goods .goods-num {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	section ul li img {
		width: 3rem;
		height: 2.573333rem;
	}

	footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 5rem;
		border-top: 0.09rem solid #ccc;
		position: absolute;
		bottom: 0;
		left: 0;
		background-color: #fff;
	}

	footer .radio {
		padding: 0.5rem;
	}

	footer .total {
		flex: 1;
		font-size: 0.8rem;
        height: 1rem;
	}

	footer .total .total-active {
		color: #ff5777;
	}

	footer .order {
		width: 8rem;
		text-align: center;
		font-size: 0.8rem;
		display: flex;
		justify-content: space-around;
		
        height: 1rem;
	}

	footer .order .order-price {
		color: #ff5777;
		line-height: 1.28rem;
		font-weight: 700;
	}

	footer .order .order-jiesuan {
		padding: 0.125rem 0.3875rem;
		height: 0.6375rem;
		background-color: #ff5777;
		color: #fff;
		font-size: 0.4125rem;
		line-height: 0.6375rem;
		border-radius: 0.4rem;
	}
</style>